.doc {
	flex: 8 800px;

	display: flex;
	flex-flow: column;
	
	> section {
		background: $doc-white;
		color: $doc-dark;
		flex: 1 1 0%; // fix for FireFox (vs just `1`)
		min-height: 0; // fix for Chrome 72+
		transition: flex $transition-t ease-out;
		
		display: flex;
		flex-direction: column;
		
		> header {
			@extend %title;
			color: $doc-darkest;
			background: $title-bg;
			
			> .max {
				transition: transform $transition-t;
				color: $doc-mid;
				margin-left: 1rem;
				cursor: pointer;
				
				&:hover {
					color: $doc-white;
				}
			}
		}
		
		> article {
			flex: 1;
			min-height: 0; // fix for Chrome 72+
		}
		
		&.closed {
			flex: 0 $title-height;
			
			> header {
				cursor: pointer;
				
				> *:not(h1) {
					opacity: 0.4;
				}
				
				> .max {
					transform: rotate(45deg);
				}
			}
		}
	}

	&.tests-mode {
		section.tools {
			display: none;
		}
	}

	// overwrite colors:
	input, textarea {
		background:  rgba($doc-white, $input-opacity);
		border-color: rgba($doc-white, $input-opacity);
	}

	.control {
		background: rgba($doc-white, $control-opacity);
	}

	.button, .buttonbar > *, .segcontrol > * {
		background: rgba($doc-white, $button-opacity);

		&:hover, &.selected {
			background: rgba($doc-white, $button-hover-opacity);
		}

		&.default:hover {
			background: $doc-white;
		}
	}
}
